<template>
  <div>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css"
    />
    <div class="m-padding-tb-massive">
      <div class="ui container">
        <div class="ui top attached segment m-fontsize-larger">
          <div class="ui middle aligned two column grid">
            <div class="column m-padding-tb">
              <h3
                class="ui teal header"
                style="position: absolute; line-height: 0px"
              >
                分类
              </h3>
            </div>
            <div id="categoryCount" class="right aligned column">
              共
              <h2 class="ui orange header m-inline-block m-text-thin">
                {{ typeCount }}
              </h2>
              类
            </div>
          </div>
        </div>
        <!-- list -->
        <div class="ui segment attached">
          <div id="categoryList" class="ui teal segment">
            <a
              class="ui teal basic left pointing label m-margin-tb-tiny"
              style="margin-left: 20px"
              v-for="type in typeArray"
              :key="type.id"
              @click="getTypeBlog(type.id)"
            >
              {{ type.tag_name }}
              <div class="detail">{{ type.COUNT }}</div>
            </a>
          </div>
        </div>
        <!-- contents -->
        <div class="ui top attached teal segment">
          <!-- content -->
          <div
            class="ui padded vertical segment m-padding-tb-large"
            v-for="blog in blogArray"
            :key="blog.id"
          >
            <div class="ui mobile reversed stackable grid">
              <div id="noteList" class="eleven wide column">
                <h3 class="ui header">
                  <a
                    style="color: #0f0f0f"
                    :href="'#/blogComment?id=' + blog.id"
                    target="_self"
                    class="m-black"
                    >{{ blog.title }}</a
                  >
                </h3>
                <p class="m-text">
                  {{ blog.content }}
                </p>
                <div class="ui grid">
                  <div class="eleven wide column m-padding-r-zero">
                    <div class="ui small horizontal link list">
                      <div class="item">
                        <img
                          :src="'http://localhost:8081/blog' + blog.uimg"
                          class="ui avatar image"
                        />
                        <div class="content">
                          <a href="#">{{ blog.nickname }}</a>
                        </div>
                      </div>
                      <div class="item">
                        <i class="calendar icon m-icon"></i
                        ><span>{{ blog.create_time.split("T")[0] }}</span>
                      </div>
                      <div class="item">
                        <i class="eye icon m-icon"></i
                        ><span>{{ blog.views }}</span>
                      </div>
                    </div>
                  </div>
                  <div class="five wide column center aligned middle aligned">
                    <a
                      href="#"
                      class="ui teal basic label m-padding-mini m-text-thin"
                      >{{ blog.type_name }}</a
                    >
                  </div>
                </div>
              </div>

              <div id="imgList" class="five wide column">
                <a href="#" target="_self">
                  <div class="m-image-box">
                    <img
                      :src="'http://localhost:8081/blog' + blog.img"
                      alt=""
                      class="ui centered rounded image m-image"
                    />
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return { typeCount: 0, typeArray: [], blogArray: [] };
  },
  created() {
    this.getTypeBlogCount();
  },
  methods: {
    getTypeBlogCount() {
      this.$get("tag/blog").then((res) => {
        if (res) {
          this.typeArray = res;
          this.typeCount = res.length;
        }
      });
    },
    getTypeBlog(id) {
      this.$get("tag/blog/" + id).then((res) => {
        if (res) {
          this.blogArray = res;
        }
      });
    },
  },
};
</script>

<style>
</style>